<template>
	<view class="content">
		<view class="title">
			<view class="left">
				<image src="../../static/积分.png" mode="widthFix"></image>
				<view ><text class="red">{{score}}</text>积分</view>
			</view>
			<view class="right" @click="gtoscore">
				   <image src="../../static/我的订单.png" mode="widthFix"></image>
				    <view >兑换记录</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="text" >积分兑换</view>
		<view class="small"></view>
		<view class="good">
			<view class="box" @click="tobuy">
				<image :src="$host+'dy.jpg'" mode="widthFix"></image> <view class="two"> <view>到店DIY...</view>
				<view class="red">积分:  {{scores}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		  data(){
				   
			   return{
				   score:0 ,
				   $host:this.$host,
				   scores:88
			   }
		  },
		  onLoad(option) {
		  	    this.score=option.score
		  },
		  methods:{
			  tobuy(){
				  if(this.score>=this.scores){
				
				  }else{
					   uni.showModal({
					   	content:"您的积分不够"
					   })
				  }
				  
			  }
				 ,  
			   gtoscore(){
				   uni.navigateTo({
				   	url:"/pages/mine/scorehistory"
				   })
			   }
		  }
		   
	}
	
</script>

<style>
	.good{
			margin-top: 20rpx;
			width: 100%;
		
            height: 80px;	
			align-items: center;
			
			
	}
	.box{
	     display: flex;
		 justify-content: center;
		 width: 145px;
		 height: 75px;
		 align-items: center;
		 	background-color: #f2f2f2;
			margin-left: 20rpx;
		
	}
		
	.box image{
		width: 43px;
		border-radius: 50%;
		margin-right: 23rpx;
	}
	.two{
		display: flex;
		flex-direction: column;
	}
	.small{
		
			width: 100%;
			height: 1rpx;
			background-color: #f4f4f4;
					margin-top: 20rpx;
				
		
	}
	.text{
		margin-top: 20rpx;
		margin-left: 10rpx;
	}
	.title image{
		  width: 40px;
		  margin-bottom: 15rpx;
		
	}
	.title{
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;
	}
		
	.red{
		color: #ff6d5a;
		margin-right: 8rpx;
		margin-top: 4rpx;
	}
	.right{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 15rpx;
	}
	.left{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 15rpx;
	}
		
	.line{
		width: 100%;
		height: 20rpx;
		background-color:#f2f2f2 ;
		margin-top: 20rpx;
	}
</style>